<!-- 分类二级 -->
<template>
  <div class="category">
    <!-- 面包屑导航 -->
    <div class="container mbx">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ msgs.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 轮播图区域 -->
    <div class="container">
      <div class="block">
        <el-carousel trigger="click" height="500px">
          <el-carousel-item v-for="item in image" :key="item.id">
            <img :src="item.url" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 轮播图区域 end  -->
    <!-- 全部分类区域 -->
    <div class="container sub-list">
      <h3>全部分类</h3>
      <ul>
        <li v-for="item in msgs.children" :key="item.id">
          <a href="#">
            <img :src="item.picture" alt="" />
            <p>{{ item.name }}</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 全部分类区域 end   -->
    <!-- 茶咖酒具区域 -->
    <div
      class="container ref-goods"
      v-for="item in msgs.children"
      :key="item.id"
    >
      <div class="head">
        <h3>- {{ item.name }} -</h3>
        <p class="god-p">温暖柔软，品质之选</p>
        <a href="#" class="god-a">
          <span>查看全部</span>
          <router-link to="/home/subs"><i class="el-icon-arrow-right"></i></router-link>
        </a>
      </div>
      <div class="body">
        <a
          href="#"
          class="goods-item"
          v-for="itema in item.goods"
          :key="itema.id"
        >
          <img :src="itema.picture" alt="" />
          <p class="name ellipsis">{{ itema.name }}</p>
          <p class="desc ellipsis">{{ itema.desc }}</p>
          <p class="price">{{ itema.price }}</p>
        </a>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "category",
  data() {
    return {
      id: "",
      msgs: {},
      image: [
        {
          id: "1",
          url: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/1ba86bcc-ae71-42a3-bc3e-37b662f7f07e.jpg",
        },
        {
          id: "2",
          url: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/dfc11bb0-4af5-4e9b-9458-99f615cc685a.jpg",
        },
        {
          id: "3",
          url: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg",
        },
        {
          id: "4",
          url: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/e83efb1b-309c-46f7-98a3-f1fefa694338.jpg",
        },
        {
          id: "5",
          url: "http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg",
        },
      ],
    };
  },
  components: {},
  methods: {
    //初始化数据
    init(id = 1005000) {
      this.$axios.get("category?id=" + id).then((res) => {
        this.msgs = res.data.result;
        console.log(res);
      });
    },
  },
  mounted() {
    this.init(this.$route.query.id);
  },
};
</script>
  
<style lang="less" scoped>
.mbx {
  padding: 25px 10px;
}
.block {
  height: 500px;
}
.sub-list {
  margin-top: 20px;
  background-color: #fff;
  overflow: hidden;
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
  }
  ul {
    display: flex;
    padding: 0 32px;
    flex-wrap: wrap;
    min-height: 160px;
    li {
      width: 168px;
      height: 160px;
      img {
        width: 100px;
        height: 100px;
        vertical-align: middle;
        margin-left: 32px;
      }
      p {
        line-height: 40px;
        text-align: center;
        color: #333333;
      }
      p:hover{
        color:#27ba9b;
      }
    }
  }
}
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: 400;
    text-align: center;
    line-height: 100px;
  }
  .god-p {
    text-align: center;
    color: #999;
    font-size: 20px;
    position: relative;
    top: -20px;
  }
  .god-a {
    position: absolute;
    top: 20px;
    right: 20px;
    span {
      font-size: 16px;
      vertical-align: middle;
      margin-right: 4px;
      color: #999;
    }
    i {
      font-size: 14px;
      vertical-align: middle;
      position: relative;
      color: #ccc;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
    font: 1em/1.4 Microsoft Yahei, PingFang SC, Avenir, Segoe UI,
      Hiragino Sans GB, STHeiti, "Microsoft Sans Serif", WenQuanYi Micro Hei,
      sans-serif;
    .goods-item {
      display: block;
      width: 220px;
      padding: 20px 30px;
      cursor: pointer;
      text-align: center;
      box-sizing: border-box;
      color: #333;
      background-color: transparent;
      transition: all 0.5s;
      box-shadow: 0 y-shadow 10px 10px rgba(0, 0, 0, .2);
      img {
        width: 160px;
        height: 160px;
        vertical-align: middle;
        border-style: none;
      }
      p {
        margin-top: 10px;
      }
      .ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .name {
        font-size: 16px;
      }
      .desc {
        color: #999;
        height: 29px;
      }
      .price {
        color: #cf4444;
        font-size: 20px;
      }
    }
    .goods-item:hover {
      transform: translateY(-6px);
      -webkit-transform: translateY(-6px);
      -moz-transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
      -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
      -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
    }
  }
}
</style>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel {
  width: 100%;
  height: 100%;
}
.category .el-carousel__button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
</style>
  